
import { courseList } from './api/index.js'

const filterList = [
    "java", "openEuler", "Kunpeng", "openGauss", "Python", "C/C++", "微服务", "Spring", "SpringBoot", "SpringCloud",
    "k8s", "docker", "html+css", "vue", "react", "nodejs", "javascript", "QtC++"
]

$(document).ready(() => {

    // 创建filter
    filterList.forEach(i => {
        const template = `
        <div class="custom-control custom-checkbox custom-control-inline">
            <input id="filter-${i}" type="checkbox" checked="true" class="custom-control-input" />
            <label for="filter-${i}" class="custom-control-label">${i}</label>
        </div>`
        $("#c-filter").append(template)
    })

    courseList().then(res => {
        if (res.code == 200) {
            const item = $(".home-courses")
            res.data.forEach(ele => {
                const template = `
                <div class="col-sm-6 col-md-4 col-lg-3 my-2 px-1">
                    <a class="course" href="/course/detail.html?id=${ ele.id }">
                        <div class="img">
                            <img src="${ ele.img }" alt="" srcset="">
                        </div>
                        <div class="content">
                            <p class="mb-0">${ ele.name }</p>
                            <p class="text-right my-1">已有:<span>${ ele.joinLearning }</span>人参与学习</p>
                        </div>
                    </a>
                </div>`
                item.append(template)
            })
            
        }
    })

})